<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 过渡：为一个元素在不同样式之间变化自动添加补间动画 */
        /* 常用   网页兼容到IE10  移动端兼容性好 */
        /* transition：width 1s linear 0s; */
        /* transition-property duration timing-function  */
        /* 什么属性要过渡 动画总时长（单位只能是s）变化速度曲线  延迟时间（单位只能是S而且必须要写）*/
        /* 变化速度曲线：linear表示匀速 */
        /* 什么属性可以设置过渡： */
        /* ·数值类的属性都可以 width height left top border-radius  */
        /* ·背景颜色和文字颜色都可以过渡 */
        /* ·所有transform变形包括2D3D都可以过渡 */
        *{
            margin:0;
            padding:0;
        }
        div.d1{
            width: 200px;
            height: 200px;
            background-color: rgb(219, 24, 24);
            margin:10px;
            /* 宽度属性的过渡 */
            transition:width 3s linear 0s;
        }
        div.d1:hover{
            width: 800px;
        }

        div.d2 p{
            position:relative;
            width: 200px;
            height: 200px;
            margin:10px;
            background-color: red;
            /* 过渡 */
            transition:left 3s linear 0s;
            /* 要设置过渡前的值 left */
            left:0px;
        }
        div.d2:hover p{
            left:700px;
        }

        div.d3{
            width: 200px;
            height: 200px;
            margin:10px;
            background-color: red;
            /* 背景颜色过渡 */
            transition: background-color 1s linear 0s;
        }
        div.d3:hover{
            background-color: green;
        }

        div.d4{
            width: 200px;
            height: 200px;
            margin:10px;
            background-color: red;
            /* 过渡圆角 */
            transition:border-radius 1s linear 0s;
            /* 设置原来的圆角值 */
            border-radius: 0px;
        }
        div.d4:hover{
            border-radius: 50%;
        }

        div.d5{
            width: 200px;
            height: 200px;
            margin:10px;
            background-color: red;
            /* 2D变换渐变 */
            transition: transform 2s linear 0s;
            transform:rotate(0deg) scale(1);            
        }
        div.d5:hover{
            transform:rotate(360deg) scale(1.5);
        }

        div.d6{
            width: 200px;
            height: 200px;
            margin:10px;
            border: 1px solid #000;
            perspective: 300px;
        }
        div.d6 p{
            width: 200px;
            height: 200px;
            background-color: red;
            /* 3D渐变 */
            transition: transform 2s linear 0s;
            transform: rotateX(0deg);

        }
        div.d6:hover p{
            transform: rotateX(360deg);
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="d2"><p></p></div>
    <div class="d3"></div>
    <div class="d4"></div>
    <div class="d5"></div>
    <div class="d6"><p></p></div>
</body>
</html>